<!--
  日期时间范围选择组件 - 基于 el-date-picker 的日期时间范围选择，将 range 值拆分为两个独立字段
  
  使用示例：
  1. 基础日期时间范围选择：
  <FormDatetimeRangeItem 
    v-model:start-datetime="form.startDatetime" 
    v-model:end-datetime="form.endDatetime"
    prop="datetimeRange" 
    label="日期时间范围" 
  />
  
  2. 自定义占位符和格式：
  <FormDatetimeRangeItem 
    v-model:start-datetime="form.startDatetime" 
    v-model:end-datetime="form.endDatetime"
    prop="datetimeRange" 
    label="日期时间范围"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
  />
  
  3. 带快捷选项：
  <FormDatetimeRangeItem 
    v-model:start-datetime="form.startDatetime" 
    v-model:end-datetime="form.endDatetime"
    prop="datetimeRange" 
    label="日期时间范围"
    :shortcuts="datetimeShortcuts"
  />
-->
<template>
  <el-form-item
    v-bind="$attrs"
    :prop="prop"
    :label="label"
    :rules="rules"
    :required="required"
    :label-width="labelWidth"
    :error="error"
    :show-message="showMessage"
    :inline-message="inlineMessage"
    :size="size"
  >
    <!-- 日期时间范围选择器 -->
    <el-date-picker
      :value="datetimeRange"
      @update:modelValue="handleChange"
      type="datetimerange"
      :range-separator="rangeSeparator"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      :placeholder="placeholder"
      :disabled="disabled"
      :clearable="clearable"
      :readonly="readonly"
      :editable="editable"
      :format="format"
      :value-format="valueFormat"
      :unlink-panels="unlinkPanels"
      :validate-event="validateEvent"
      :size="size"
      :class="pickerClass"
      :style="pickerStyle"
      :teleported="teleported"
      :popper-class="popperClass"
      :popper-style="popperStyle"
      :popper-options="popperOptions"
      :shortcuts="shortcuts"
      :disabled-date="disabledDate"
      :cell-class-name="cellClassName"
      :teleport-to="teleportTo"
      @change="handleChange"
      @blur="handleBlur"
      @focus="handleFocus"
      @calendar-change="handleCalendarChange"
      @panel-change="handlePanelChange"
    />
  </el-form-item>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElFormItem, ElDatePicker } from 'element-plus'
import type { DatePickerProps } from 'element-plus'

interface Props {
  // 表单相关属性
  prop?: string
  label?: string
  rules?: any
  required?: boolean
  labelWidth?: string
  error?: string
  showMessage?: boolean
  inlineMessage?: boolean
  size?: 'large' | 'default' | 'small'

  // 双向绑定的开始和结束日期时间
  startDatetime?: string | Date | null
  endDatetime?: string | Date | null

  // 日期时间选择器属性
  rangeSeparator?: string
  startPlaceholder?: string
  endPlaceholder?: string
  placeholder?: string
  disabled?: boolean
  clearable?: boolean
  readonly?: boolean
  editable?: boolean
  format?: string
  valueFormat?: string
  unlinkPanels?: boolean
  validateEvent?: boolean
  pickerClass?: string
  pickerStyle?: any
  teleported?: boolean
  popperClass?: string
  popperStyle?: any
  popperOptions?: any
  shortcuts?: Array<{
    text: string
    value: Date | (() => Date) | (() => [Date, Date])
  }>
  disabledDate?: (time: Date) => boolean
  cellClassName?: (time: Date) => string
  teleportTo?: string | HTMLElement
}

interface Emits {
  (e: 'update:startDatetime', value: string | Date | null): void
  (e: 'update:endDatetime', value: string | Date | null): void
  (e: 'change', value: [string | Date | null, string | Date | null]): void
  (e: 'blur', event: FocusEvent): void
  (e: 'focus', event: FocusEvent): void
  (e: 'calendar-change', value: [Date, Date]): void
  (e: 'panel-change', value: [Date, Date]): void
}

const props = withDefaults(defineProps<Props>(), {
  rangeSeparator: '至',
  startPlaceholder: '开始时间',
  endPlaceholder: '结束时间',
  placeholder: '请选择日期时间范围',
  disabled: false,
  clearable: true,
  readonly: false,
  editable: true,
  format: 'YYYY-MM-DD HH:mm:ss',
  valueFormat: 'YYYY-MM-DD HH:mm:ss',
  unlinkPanels: false,
  validateEvent: true,
  teleported: true,
  startDatetime: null,
  endDatetime: null
})

const emit = defineEmits<Emits>()

// 计算日期时间范围值
const datetimeRange = computed(() => {
  if (props.startDatetime && props.endDatetime) {
    return [props.startDatetime, props.endDatetime]
  }
  return null
})

// 处理值变化
const handleChange = (value: [string | Date | null, string | Date | null] | null) => {
  if (value && value.length === 2) {
    const [startDatetime, endDatetime] = value
    emit('update:startDatetime', startDatetime)
    emit('update:endDatetime', endDatetime)
    emit('change', [startDatetime, endDatetime])
  } else {
    emit('update:startDatetime', null)
    emit('update:endDatetime', null)
    emit('change', [null, null])
  }
}

// 处理失焦
const handleBlur = (event: FocusEvent) => {
  emit('blur', event)
}

// 处理聚焦
const handleFocus = (event: FocusEvent) => {
  emit('focus', event)
}

// 处理日历变化
const handleCalendarChange = (value: [Date, Date]) => {
  emit('calendar-change', value)
}

// 处理面板变化
const handlePanelChange = (value: [Date, Date]) => {
  emit('panel-change', value)
}

// 监听外部值变化，同步到内部状态
watch(
  () => [props.startDatetime, props.endDatetime],
  ([newStartDatetime, newEndDatetime]) => {
    // 这里可以添加额外的同步逻辑
  },
  { deep: true }
)
</script>

<style lang="less" scoped>
// 可以添加自定义样式
</style>
